<!-- markdown -->
<template>
  <div class="flex justify-center">
    <div class="margin-tb padding-tb width-main">
      <article
        class="markdown-body"
        v-highlight
        ref="markdown"
        v-html="content"
      ></article>
    </div>
  </div>
</template>
<script>
import marked from "marked";
export default {
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      content: "",
    };
  },
  mounted() {
    this.handleRender();
  },
  methods: {
    handleRender() {
      this.content = marked(this.value);
    },
  },
};
</script>
<style lang='scss' scoped>
</style>